<template>
  <el-container style="height: 100%;">
    <el-header style="height: 20%;">
		<el-button style="float: left; margin-top: 5px;" @click="shouye">返回首页</el-button>	
	</el-header>
    <el-main style="height:1000px">
	<el-upload
	  class="upload-demo"
	  ref="upload"
	  action="http://localhost:8081/upload"
	  :on-preview="handlePreview"
	  :on-remove="handleRemove"
	  :file-list="fileList"
	  :auto-upload="false"
	  style="height: 100%; width: 100%;">
	  <el-button slot="trigger" size="small" type="primary"style="height: 40px; width: 100px;">选取文件</el-button>
	  <el-button style="margin-left: 10px; height: 40px; width: 100px; margin-left: -5.4%; margin-top: -100%;"  size="small" type="success" @click="submitUpload">上传到服务器</el-button>
	  <div slot="tip" class="el-upload__tip">
		  <p>请上传webp格式文件，如果没有返回的结果则此次转换失败</p>
	  </div>
	</el-upload>
	</el-main>
  </el-container>
</template>

<script>
import axios from 'axios';
  export default {
    data() {
      return {
        fileList: []

      };
    },
    methods: {
      submitUpload() {
		this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
	  shouye(){
		 this.$router.push("/aboutme");
		   console.log("点击");
	  }
    }
  }
</script>

<style Scoped>
	*{
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	 .el-header, .el-footer {
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
	  }
	  
	  .el-aside {
	    background-color: #D3DCE6;
	    color: #333;
	    text-align: center;
	    line-height: 200px;
	  }
	  
	  .el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    line-height: 160px;
	  }
</style>